<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />
</head>

<body>
    <div class="bg1">
        <nav class="navbar navbar-expand-lg navbar-light ">
            <img src="./images/logo.png" style="width: 165px; height: 70px;" alt="" class="navbar-brand">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText"
                aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav mr-auto">

                </ul>
                <span class="navbar-text">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="./index.html">Home <span class="sr-only">(current)</span></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./Services/services.html">Services</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./About/about.html">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="./Contact Us/contact.html">Contact</a>
                        </li>
                        <li class="nav-item">
                            <button type="button" class="btn">Take Action</button>
                        </li>
                    </ul>
                </span>
            </div>
        </nav>

        <div class="bg_content">
            <h3 style=" font-size: 14px; color: #FFF; font-weight: bolder;">Explore the Colorfull World</h3>
            <hr style="width: 25px; background-color: red; margin-top: -3px;" />
            <h2 style="font-weight: bold; letter-spacing: 2px; margin-bottom: 20px; color: #FFF;">A WonderFull Gift</h2>
            <button type="button" class="btn">Learn More</button>
        </div>
    </div>


    <div class="container-fluid">
        <div class="container"
            style="height: 120px; width: 100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-evenly; align-items: center;">
            <div>
                <img src="./images/quooma.png" style="width: 65px; height: 45px;" alt="">
            </div>
            <div
                style="display: flex; justify-content: center; flex-direction: column; align-items: center; flex-wrap: wrap;">
                <h6 style="font-size: smaller;  font-weight: 500;" class="quote">The World is a book and those who do
                    not travel read only a page</h6>
                <h6 style="font-size: smaller; margin-top: 3%; font-weight: 500;">~Saint Augustine</h6>
            </div>
        </div>
    </div>

    <div class="container-fluid bg2">
        <div class="container" style="margin-top: 8%;">
            <h3 style="text-align: center; font-weight: bold;">UPCOMING EVENTS</h3>
            <hr style="width: 45px; background-color: rgb(252,101,138); margin-top: -3px; border-width: 3px;" />
            <div class="main_card"
                style="display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap; margin-top: 3%;">
                <div class="card" style="width: 18rem;">
                    <img class="card-img-top" src="./images/card_img.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">Camp Holidays</h5>
                        <p class="card-text" style="text-align: center;">The World is a book and those who do
                            not travel read only a page</p>
                        <a href="#" class="btn mx-auto d-block">Learn More</a>
                    </div>
                </div>

                <div class="card" style="width: 18rem; margin-left: 4%;">
                    <img class="card-img-top" src="./images/card_img2.jpg" alt="Card image cap">
                    <div class="card-body">
                        <h5 class="card-title text-center">Event Camp Talk</h5>
                        <p class="card-text" style="text-align: center;">The World is a book and those who do
                            not travel read only a page</p>
                        <a href="#" class="btn nmx-auto d-block">Learn More</a>
                    </div>
                </div>
            </div>
        </div>
    </div>


    <div class="container bg3">
        <div class="row">
            <div class="col-4">
            </div>

            <div class="col-6 mx-auto mt-4">
                <h4 style="font-weight: bolder; color: #FFF; text-align: left; margin-top: 18%;">EXPLORE THE WORLD
                </h4>
                <hr
                    style="width: 45px; background-color: rgb(252,101,138); margin-top: 10px; border-width: 3px; text-align: left; margin-left: 0;" />
                <p style="text-align: justify; color: #FFF; font-size: smaller;">Lets go around a world trip in
                    order to explore the beauty that Allah Almighty has created that is worth seeing and
                    commandable. We had organize trips that include hiking, swimming etc in order to provide customer an
                    inner peace
                </p>
                <button type="button" class="btn">Learn More</button>
            </div>
        </div>
    </div>

    <footer class="container-fluid social-div" style="background-color: rgb(37,39,46); margin-top: 10%;">
        <div class="container">
            <div class="row ">
                <div class="col-4">
                    <p style="color:rgb(173,173,174); padding-top: 25%;">Head Office, <br>
                        A-25, Bahadurabad Chowrangi Karachi, Pakistan</p>
                    <ul class="list-inline mt-3 mb-5">
                        <li style="color: rgb(155,155,157);" class="m-0 pl-10 pr-10"> <i
                                class="fa fa-phone fa-xs text-theme-colored mr-2"></i>UAN: 111-729-526 </li>
                        <li style="color: rgb(155,155,157);" class="m-0 pl-10 pr-10"> <i
                                class="fa fa-globe fa-xs text-theme-colored mr-2"></i>(+0092-213) 4130786-90</li>
                        <li style="color: rgb(155,155,157);" class="m-0 pl-10 pr-10"> <i
                                class="fa fa-phone fa-xs text-theme-colored mr-2"></i>CELL: 92-311-1729526</li>
                        <li style="color: rgb(155,155,157);" class="m-0 pl-10 pr-10"> <i
                                class="fa fa-phone fa-xs text-theme-colored mr-2"></i>USA NO +1(716)941 7792 </li>
                        <li style="color: rgb(155,155,157);" class="m-0 pl-10 pr-10"> <i
                                class="fa fa-phone fa-xs text-theme-colored mr-2"></i>UK NO (+44)115 970 6256 </li>
                        <li style="color: rgb(155,155,157);" class="m-0 pl-10 pr-10 emial"> <i
                                class="fa fa-envelope fa-xs text-theme-colored mr-2"></i>alihasan21987@gmail.com
                        </li>
                    </ul>
                </div>

                <div class="col-3">
                    <h6 style="color: #FFF; padding-top: 16%; ">Useful Links</h6>
                    <hr style="border: 1px solid rgb(66,121,0); width: 15%; text-align: left; margin-left: 0;">
                </div>

                <div class="col-3">
                    <h6 style="color: #FFF; padding-top: 16%; ">ConnectWithUs</h6>
                    <img style="height: 40px; width: 40px;" src="./images/fb.png" alt="">
                    <img style="height: 35px; width: 35px;" src="./images/twitter.png" />
                    <img style="height: 35px; width: 35px;" src="./images/instagram.png" alt="">
                </div>
            </div>
        </div>
    </footer>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>
</body>

</html>